<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <nav-bar title="故事合集"></nav-bar>

        <!-- 主要内容区 -->
        <view class="main-content">
            <!-- 精选故事模块 -->
            <view class="module-section">
                <view class="story-module-header">
                    <text class="module-title">精选故事</text>
                    <text class="module-more" @click="navigateTo('/pages/storylibrary/storyCollection/featured')">更多
                        ></text>
                </view>
                <scroll-view scroll-x class="featured-stories-scroll" show-scrollbar="false">
                    <view class="featured-stories">
                        <view class="featured-story"
                            @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=1')">
                            <view class="index-story-cover">
                                <text class="storyCollection-story-tag">感人</text>
                            </view>
                            <view class="story-info">
                                <text class="story-title">生命的陪伴</text>
                                <text class="story-author">张阿姨</text>
                                <!-- <view class="story-stats">
                                    <text class="story-views">1.2k阅读</text>
                                    <text class="story-likes">98喜欢</text>
                                </view> -->
                            </view>
                        </view>
                        <view class="featured-story"
                            @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=2')">
                            <view class="index-story-cover index-story-cover-2">
                                <text class="storyCollection-story-tag">温馨</text>
                            </view>
                            <view class="story-info">
                                <text class="story-title">最后的旅行</text>
                                <text class="story-author">李伯伯</text>
                                <!-- <view class="story-stats">
                                    <text class="story-views">956阅读</text>
                                    <text class="story-likes">87喜欢</text>
                                </view> -->
                            </view>
                        </view>
                        <view class="featured-story"
                            @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=3')">
                            <view class="index-story-cover index-story-cover-3">
                                <text class="storyCollection-story-tag">回忆</text>
                            </view>
                            <view class="story-info">
                                <text class="story-title">童年的记忆</text>
                                <text class="story-author">王爷爷</text>
                                <!-- <view class="story-stats">
                                    <text class="story-views">845阅读</text>
                                    <text class="story-likes">76喜欢</text>
                                </view> -->
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>

            <!-- 故事分类模块 -->
            <view class="module-section">
                <view class="story-module-header">
                    <text class="module-title">故事分类</text>
                    <text class="module-more"
                        @click="navigateTo('/pages/storylibrary/storyCollection/categories/index')">更多
                        ></text>
                </view>
                <view class="category-cards">
                    <view class="category-card"
                        @click="navigateTo('/pages/storylibrary/storyCollection/categories/connection')">
                        <view class="category-icon">❤️</view>
                        <text class="category-name">爱与关系</text>
                        <!-- <text class="category-count">42个故事</text> -->
                    </view>
                    <view class="category-card"
                        @click="navigateTo('/pages/storylibrary/storyCollection/categories/struggle')">
                        <view class="category-icon">🌱</view>
                        <text class="category-name">奋斗与成长</text>
                        <!-- <text class="category-count">38个故事</text> -->
                    </view>
                    <view class="category-card"
                        @click="navigateTo('/pages/storylibrary/storyCollection/categories/meaning')">
                        <view class="category-icon">✨</view>
                        <text class="category-name">意义与超越</text>
                        <!-- <text class="category-count">35个故事</text> -->
                    </view>
                </view>
            </view>

            <!-- 推荐阅读 -->
            <view class="module-section">
                <view class="story-module-header">
                    <text class="module-title">推荐阅读</text>
                </view>
                <view class="recommended-stories">
                    <view class="recommended-story"
                        @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=4')">
                        <view class="recommended-index-story-cover"></view>
                        <view class="recommended-story-info">
                            <text class="recommended-story-title">人生的转折点</text>
                            <text class="recommended-story-desc">每个人的生命中都有那么一个瞬间，改变了一切...</text>
                            <view class="recommended-story-meta">
                                <text class="recommended-story-author">赵奶奶</text>
                                <!-- <text class="recommended-story-time">3天前</text> -->
                            </view>
                        </view>
                    </view>
                    <view class="recommended-story"
                        @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=5')">
                        <view class="recommended-index-story-cover recommended-index-story-cover-2"></view>
                        <view class="recommended-story-info">
                            <text class="recommended-story-title">难忘的第一次</text>
                            <text class="recommended-story-desc">那是我第一次独自照顾生病的母亲，那一刻我明白了...</text>
                            <view class="recommended-story-meta">
                                <text class="recommended-story-author">陈叔叔</text>
                                <!-- <text class="recommended-story-time">1周前</text> -->
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'

export default {
    components: {
        NavBar
    },
    data() {
        return {

        }
    },
    methods: {
        navigateTo(url) {
            uni.navigateTo({
                url: url
            });
        }
    }
}
</script>

<style>
/* 统一样式 */
@import '../index.css';

.module-section {
    margin-bottom: 40rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.story-module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
}

.module-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.module-more {
    font-size: 26rpx;
    color: #44b79b;
}

/* 精选故事样式 */
.featured-stories-scroll {
    width: 100%;
}

.featured-stories {
    display: flex;
    width: max-content;
}

.featured-story {
    width: 300rpx;
    margin-right: 20rpx;
    border-radius: 15rpx;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.featured-story:active {
    transform: scale(0.98);
}

.index-story-cover {
    height: 180rpx;
    background-color: #8bc34a;
    background-image: linear-gradient(135deg, #8bc34a, #4caf50);
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 15rpx;
}

.index-story-cover-2 {
    background-image: linear-gradient(135deg, #ff9800, #ff5722);
}

.index-story-cover-3 {
    background-image: linear-gradient(135deg, #03a9f4, #2196f3);
}

.storyCollection-story-tag {
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 22rpx;
    padding: 6rpx 12rpx;
    border-radius: 20rpx;
}

.story-info {
    padding: 15rpx;
}

.story-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 8rpx;
    display: block;
}

.story-author {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 8rpx;
    display: block;
}

.story-stats {
    display: flex;
    justify-content: space-between;
}

.story-views,
.story-likes {
    font-size: 22rpx;
    color: #999;
}

/* 故事分类样式 */
.category-cards {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
}

.category-card {
    width: 30%;
    background-color: #f9f9f9;
    border-radius: 15rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s;
}

.category-card:active {
    transform: scale(0.95);
}

.category-icon {
    font-size: 50rpx;
    margin-bottom: 15rpx;
}

.category-name {
    font-size: 26rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 8rpx;
}

.category-count {
    font-size: 22rpx;
    color: #999;
}

/* 推荐阅读样式 */
.recommended-stories {
    display: flex;
    flex-direction: column;
}

.recommended-story {
    display: flex;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #f0f0f0;
}

.recommended-story:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.recommended-index-story-cover {
    width: 180rpx;
    height: 120rpx;
    border-radius: 10rpx;
    background-color: #8bc34a;
    background-image: linear-gradient(135deg, #8bc34a, #4caf50);
    margin-right: 20rpx;
    flex-shrink: 0;
}

.recommended-index-story-cover-2 {
    background-image: linear-gradient(135deg, #ff9800, #ff5722);
}

.recommended-story-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.recommended-story-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
}

.recommended-story-desc {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 10rpx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recommended-story-meta {
    display: flex;
    justify-content: space-between;
}

.recommended-story-author,
.recommended-story-time {
    font-size: 22rpx;
    color: #999;
}
</style>